<template>
  <q-form @submit="reset" class="reset">
    <q-input rounded filled dense autofocus v-model="password" label="新密码" lazy-rules type="password"
             hint="6-20位字母和数字的组合"
             :rules="[val => val !== null && val !== '' || '请填写新密码', checkPassword]">
      <template v-slot:prepend>
        <q-icon name="iconfont icontubiao-0" style="color:#333;font-size: 18px" />
      </template>
    </q-input>
    <q-input rounded filled dense v-model="passwordSure" label="再次确认" lazy-rules type="password"
             :rules="[val => val !== null && val !== '' || '请填写确认密码', checkSurePassword]">
      <template v-slot:prepend>
        <q-icon name="iconfont icontubiao-0" style="color:#333;font-size: 18px" />
      </template>
    </q-input>
    <div>
      <q-btn dense unelevated label="确定" class="full-width login-btn" type="submit" color="primary"/>
    </div>
    <div class="link">
      <router-link to="/login/sure-phone" class="text-grey-10 link-txt">返回</router-link>
    </div>
  </q-form>
</template>

<script>
import { saveToken, saveRefreshToken } from 'yz-help'
import { mapMutations } from 'vuex'
import { resetPassword } from 'src/boot/login/login'
import { goLoginPage } from '../../permission'
export default {
  name: 'reset',
  data () {
    return {
      // 手机号
      phone: null,
      // 密码
      password: null,
      // 确认密码
      passwordSure: null,
      // 验证码
      code: null
    }
  },
  created () {
    this.phone = this.$route.query.phone
  },
  methods: {
    // 验证密码，必须为字母加数字且长度6-20位
    checkPassword (password) {
      if (password.length < 6 || password.length > 20) {
        return '密码必须为字母加数字且长度6-20位'
      }
      const reg1 = new RegExp(/^[0-9A-Za-z]+$/)
      if (!reg1.test(password)) {
        return '密码必须为字母加数字且长度6-20位'
      }
      const reg = new RegExp(/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/)
      if (reg.test(password)) {
        return true
      } else {
        return '密码必须为字母加数字且长度6-20位'
      }
    },
    checkSurePassword (surePassword) {
      if (surePassword !== this.password) {
        return '确认密码与新密码不相同'
      }
      return true
    },
    // 重置密码,去登陆
    reset () {
      let params = {
        phone: this.phone,
        newPassword: this.password
      }
      resetPassword(params).then(res => {
        saveToken('')
        saveRefreshToken('')
        this.setToken('')
        this.setRefreshToken('')
        goLoginPage()
        // this.$router.push('/login')
      })
    },
    ...mapMutations({
      'setToken': 'SET_TOKEN',
      'setRefreshToken': 'SET_REFRESHTOKEN'
    })
  }
}
</script>

<style scoped lang="stylus">
</style>
